<template>
  <!-- #ifdef H5 -->
  <el-icon :size="size" class="gd-icon">
    <component
      v-if="iconCompmapping.hasOwnProperty(iconName)"
      :is="iconCompmapping[iconName]"
      :color="color"
    >
    </component>
    <Icon v-else :icon="iconName" :color="color" />
  </el-icon>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <uni-icons
    :customPrefix="iconObj.customPrefix"
    :type="iconObj.type"
    :size="size"
  ></uni-icons>
  <!-- #endif -->
</template>
<script setup>
import { reactive, shallowReactive, ref, computed } from "vue";
// #ifdef H5
import { ElIcon } from "element-plus";
import "element-plus/theme-chalk/el-icon.css";
import * as icons from "@element-plus/icons-vue";
import { transName } from "@/config/utils";
import { Icon } from "@iconify/vue";
// #endif
const props = defineProps({
  iconName: {
    type: String,
  },
  color: {
    type: String,
  },
  size: {
    type: String,
  },
});
const allElIcons = {};
Object.keys(icons).forEach((key) => {
  const newName = transName(key, "Pascal", "Kebab");
  allElIcons[newName] = icons[key];
});
const iconCompmapping = shallowReactive(allElIcons);

// #ifndef H5
const iconObj = computed(() => {
  if (props.iconName.indexOf(":") !== -1) {
    const result = props.iconName.split(":");
    const [customPrefix, type] =
      result.length === 1 ? [undefined, result[0]] : result;
    return {
      customPrefix,
      type,
    };
  } else {
    return {
      customPrefix: undefined,
      type: props.iconName,
    };
  }
});
// #endif
</script>
